<template>
	<view class="info-box auto pl40 pr40 pt40 borderbox pb40 mb40">
		<!-- 头像昵称部分 -->
		<view class="avatar dflex">
			<image
				:src="'https://guoshengzichan.com/' + props.data.avatar"
				mode="widthFix"
				class="mr20"
			></image>
			<view>
				<view class="fs32 fw600" style="color: #313131;">{{ props.data.nickname }}</view>
				<view style="color: #B0ADB2;" class="fs28 mt8">
					{{ mixin(new Date(props.data.createtime).getTime()) }}
				</view>
			</view>
		</view>
		<!-- 头像部分结束 -->
		<view class="text mt22 fs30" style="color: #494A4F;">{{ props.data.context }}</view>
		<!-- 图片部分 -->
		<view class="mt18 content-img" v-html="props.data.content"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import mixin from '../../mixns/mixin.js';
const props = defineProps({
	data: {
		type: Object,
		default: {}
	}
});
</script>

<style lang="scss" scoped>
.info-box {
	width: 690rpx;
	background: #fff;
	box-shadow: 0rpx 18rpx 30rpx 0rpx rgba(137, 132, 165, 0.1);
	border-radius: 30rpx;
}
.avatar {
	image {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}
}
.text {
	line-height: 55rpx;
}
p {
	width: 270rpx;
}
</style>
